<template>
  <div
    :id="'uiPrintTable-body-' + info._id"
    ref="uiPrintTable-body"
    class="ui-tabel relative"
    :class="[hasMini ? 'table-mini' : '', info.extension.customStyle && info.extension.customStyle.value ? 'cunstomTableStyle' : '']"
  >
    <vxe-grid
      :ref="info._id"
      v-ui-ref="vSetRef"
      v-bind="gridOptions"
      :class="{ noScrollBar: info.extension.noScrollBar && info.extension.noScrollBar.value }"
      :scroll-x="scrollXConfig"
      :scroll-y="{ gt: 50 }"
      :style="{
        'background-color': 'initial',
        color: 'initial',
        'border-color': 'initial',
        'background-image': 'initial',
      }"
    >
      <!-- 空数据 -->
      <template #empty>
        <el-empty :description="translateTitle('Ve.elements.table.暂无数据')" />
      </template>
      <template #Status="{ row }">
        <el-tag v-if="row.Status" type="success">在线</el-tag>
        <el-tag v-else type="danger">离线</el-tag>
      </template>
    </vxe-grid>
  </div>
</template>
<script>
  import { defineComponent } from 'vue'
  import { UiMixin, RefsInjectMixin } from '@ve/mixin'
  import { domHeight } from '@ve/utils/domHeight'
  import isEmpty from 'lodash/isEmpty'
  import { translateTitle } from '@/utils/i18n'
  export default defineComponent({
    name: 'UiPrintTable',
    mixins: [UiMixin, RefsInjectMixin],
    data() {
      return {
        showCustomOption: false,
        dataSourceChangeIndex: 0,
        columnSortable: null,
        pageSize: 1,
        tabelHeight: 300,
        list: [],
        loading: false,
        //click记录
        clickRowId: '', //点击行id 单击双击
        hasClickRefreshLoading: false,
        cacheFormData: {}, //缓存formdata
        hasCheckboxSelectAll: false, //是否全选
        selectRow: {}, //选中数据行
        //可编辑slots数据
        editSlots: [],
        switchSlots: [],
        selectSlots: [],
        inputSlots: [],
        hasOpenEdit: false,
        // editActivedVisible: false,
        //操作按钮
        //排序状态
        sortType: {},
        //批次属性表头
        batchAttributeColumns: [],
        dataSourceFormData: {}, // 数据源绑定获取的数据（不作为参数使用时）
        hasMini: false,
        //缓存编辑模式下的数据
        cacheEditRows: {},
        editFormItem: '', // 当前触发改变的表单项
        scrollXConfig: {
          gt: 10,
          enabled: true,
        },
        editModel: false, // 是否为编辑模式
        buttonIsOverflowing: false, // 按钮是否溢出
        showButtonList: [], // 未折叠的按钮组
        foldButtonList: [], // 折叠的按钮组
        buttonWidthObj: {},
        //表格是否显示自定义排序 动态表格不需要显示
        isShowCustom: true,
        disposeButtonTimeOut: null,
        menuClickIsRunning: false, // 右键菜单事件是否进行中
        columnEditModule: false, // 是否是列编辑模式
        columnEditConfig: {}, // 列编辑模式配置
        columnEditSlots: [],
      }
    },
    computed: {
      currentPage() {
        return this.info.data.formData['#LIMIT#']
      },
      printData() {
        return this.$store.getters['diyPrint/getMonitorData']
      },
      getCount() {
        return this.info.data.requestData?.count || 0
      },
      getData() {
        return this.info.data.requestData?.data || []
      },
      gridOptions() {
        let gridOptionsData = {
          rowConfig: {
            useKey: true,
            isHover: true,
            isCurrent: true,
          },
          columnConfig: {
            useKey: true,
            resizable: true,
          },
          showHeaderOverflow: true,
          keepSource: true,
          columnKey: true,
          stripe: true,
          loading: this.loading,
          resizable: true,
          autoResize: true,
          border: true,
          showOverflow: true,
          height: this.tabelHeight, //'auto',
          radioConfig: { highlight: true },
          checkboxConfig: { highlight: true },
          // data: this.list || [],
          columns: [
            { type: 'checkbox', width: 50 },
            { type: 'seq', width: 50, title: '序号' },
            {
              field: 'PrintName',
              title: '打印机名称',
              minWidth: 80,
            },
            { field: 'Status', title: '打印机状态', minWidth: 80, slots: { default: 'Status' } },
            { field: 'StationId', title: '工作站', minWidth: 100 },
          ],
        }

        // 写入对齐方式配置
        if (this.info.extension.align && this.info.extension.align.value) {
          gridOptionsData.align = this.info.extension.align.value
        }
        return gridOptionsData
      },
      getPageSize() {
        return Number(this.info.extension.pageSize.value)
      },
      getInfo() {
        return this.info
      },
      getExtension() {
        return this.info.extension
      },
      //是否是单选或者多选
      hasCheckboxOrRadio() {
        let _type = ''
        this.getExtension.tableColumns.value.forEach((v) => {
          if (v._type == 'checkbox') {
            _type = 'checkbox'
          }
          if (v._type == 'radio') {
            _type = 'radio'
          }
        })
        return _type
      },
      getOperateMenu() {
        return this.info.extension.operateMenuConfig.value
      },
      getRowStatusConfig() {
        return this.info.extension.rowStatusConfig.value
      },
      getCellStatusConfig() {
        return this.info.extension.cellStatusConfig && this.info.extension.cellStatusConfig.value
      },
      getColumnStatusConfig() {
        return this.info.extension.columnStatusConfig && this.info.extension.columnStatusConfig.value
      },
      getEditDefault() {
        return this.info.extension.clickEdit.value.editDefault
      },
    },
    watch: {
      getData: {
        immediate: true,
        handler: function (newval) {
          this.list = newval
          this.tableLoadData(newval)
        },
      },
      printData: {
        handler: function (newval) {
          // console.log('newval', newval, this.info._id)
          if (newval && Object.keys(newval).length > 0) {
            this.getPrint(newval)
          }
        },
      },
    },
    created() {
      this.$sub(`SplitpaneResized_${this.previewPageId()}`, () => {
        this.getHeight()
      })
    },
    mounted() {
      this.$nextTick(() => {
        this.getHeight()
      })
    },
    methods: {
      translateTitle,
      getPrint(val) {
        const { message } = val
        if (message.type == 'fun') {
          if (message.fun === 'template') {
            this.info.data.requestData.data = message.PRINTS
          }
        }
      },
      tableLoadData(data) {
        if (isEmpty(data)) {
          data = []
          // return
        }
        this.getTableRef() && this.getTableRef().loadData(data)
      },
      getTableRef() {
        return this.$refs[this.getInfo._id]
      },
      getHeight() {
        setTimeout(() => {
          let _domHeight = domHeight(this)
          console.log('_domHeight 打印机表格', _domHeight)
          if (_domHeight > 0) {
            this.tabelHeight = _domHeight
            this.tabelHeight = this.getInfo.height || this.tabelHeight
          }
        }, 300)
      },
    },
  })
</script>
